<!-- 视频管理页面 -->
<template>
  <div>
    <!-- 引入筛选组件 -->
    <FilterTabs
      :tabs="tabs"
      :currentTab="currentTab"
      @tab-change="changeTab"
      :isAnySelected="isAnySelected"
      :allSelectedOnPage="allSelectedOnPage"
      @toggle-select-all="toggleSelectAll"
      @batch-delete="batchDeleteExams"
      :statusOptions="statusOptions"
      :newExamLabel="'新建视频'"
       @toggle-new-exam-menu="toggleNewResourceMenu" 
    />

<!-- 新增视频菜单 -->
    <div v-if="newResourceMenuVisible" class="new-question-menu" style="right: 11.5vw">
      <span @click="handleSelectMaterial">选择视频</span>
      <span @click="handleUploadMaterial">上传视频</span>
    </div>

    <!-- 视频列表 -->
    <div v-for="exam in paginatedExams" :key="exam.exam_id">
      <ResourceCard 
        :resource="exam" 
        :selectedExams="selectedExams" 
        @toggle-selection="toggleSelection" 
        :statusConfig="statusConfig" 
        :createAction="toggleNewExamMenu" 
      />
    </div>

    <!-- 分页组件 -->
    <PagiNation 
      :currentPage="currentPage" 
      :totalPages="totalPages" 
      @page-change="handlePageChange" 
    />
  </div>
</template>


<script>
import { ref, computed } from 'vue';
import FilterTabs from '@/components/FilterTabs.vue';
import ResourceCard from '@/components/ResourceCard.vue';
import PagiNation from '@/components/PagiNation.vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'TechVideos',
  components: {
    FilterTabs,
    ResourceCard,
    PagiNation,
  },
  setup() {
    const currentTab = ref('全部视频');
    const currentPage = ref(1);
    const item视频erPage = ref(8);
    const selectedExams = ref(new Set());
    const exams = ref([
      { exam_id: 1, paper_title: '视频 1', status: 0, username: '老师 1', create_time: '2022-01-01', publish_time: null, cover: 'https://pic.52112.com/2020/04/13/JPG-200413_328/gCaPae4zjp_small.jpg' },
  { exam_id: 2, paper_title: '视频 2', status: 1, username: '老师 2', create_time: '2022-01-02', publish_time: '2023-01-01', cover: 'https://ts1.cn.mm.bing.net/th/id/R-C.7b0791da556ca3d24acbf90ee49b739f?rik=8y%2bmKNLwPGRBNg&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50118%2f7101.jpg_wh1200.jpg&ehk=ioYQckbfqLEXxXpsxW0IgyNGeJCih5QezMPdD%2bTSuA0%3d&risl=&pid=ImgRaw&r=0' },
  { exam_id: 3, paper_title: '视频 3', status: 2, username: '老师 3', create_time: '2022-01-03', publish_time: '2026-01-01', cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.oy3-QAVlt8dUG1MSLhHr_QHaEJ?rs=1&pid=ImgDetMain' }
    ]);

    // 动态生成筛选标签
    const tabs = ref([
      { label: '全部视频', value: '全部视频', count: 3 },
      { label: '未发布', value: 0, count: 1 },
      { label: '已发布', value: 1, count: 1 },
      { label: '预发布', value: 2, count: 1 }
    ]);

    // 状态配置
    const statusOptions = ref([
      { value: 0, label: '未发布' },
      { value: 1, label: '已发布' },
      { value: 2, label: '预发布' },
    ]);

    const statusConfig = ref([
      { value: 0, label: '未发布', badgeClass: 'badge-unpublished' },
      { value: 1, label: '已发布', badgeClass: 'badge-unstart' },
      { value: 2, label: '预发布', badgeClass: 'badge-in-progress' }
    ]);

    const isAnySelected = computed(() => selectedExams.value.size > 0);
    const allSelectedOnPage = computed(() => {
      return paginatedExams.value.every(exam => selectedExams.value.has(exam.exam_id));
    });

    const filteredExams = computed(() => {
      if (currentTab.value === '全部视频') return exams.value;
      return exams.value.filter(exam => exam.status === currentTab.value);
    });

    const paginatedExams = computed(() => {
      const start = (currentPage.value - 1) * item视频erPage.value;
      return filteredExams.value.slice(start, start + item视频erPage.value);
    });

    const totalPages = computed(() => Math.ceil(filteredExams.value.length / item视频erPage.value));

    const changeTab = (tabValue) => {
      currentTab.value = tabValue;
      currentPage.value = 1;
    };

    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    const toggleSelection = (examId) => {
      if (selectedExams.value.has(examId)) {
        selectedExams.value.delete(examId);
      } else {
        selectedExams.value.add(examId);
      }
    };

    const toggleSelectAll = () => {
      if (allSelectedOnPage.value) {
        paginatedExams.value.forEach(exam => selectedExams.value.delete(exam.exam_id));
      } else {
        paginatedExams.value.forEach(exam => selectedExams.value.add(exam.exam_id));
      }
    };

    const batchDeleteExams = async () => {
      if (selectedExams.value.size === 0) {
        ElMessage.warning('请选择要删除的视频！');
        return;
      }

      const confirmDelete = confirm('确定要删除选中的视频吗？');
      if (!confirmDelete) return;

      // 临时删除逻辑
      const examIds = Array.from(selectedExams.value);
      console.log('删除的视频ID:', examIds);
      // 在这里调用 API 删除视频
      selectedExams.value.clear();
    };

    // 新建视频的操作
    const toggleNewExamMenu = () => {
      ElMessage.success('这里可以选择新建视频操作');
    };

    // 新增视频菜单状态
    const newResourceMenuVisible = ref(false);
    
    // 修改后的切换菜单方法
    const toggleNewResourceMenu = () => {
      newResourceMenuVisible.value = !newResourceMenuVisible.value;
    };

    // 新增视频操作处理方法
    const handleSelectMaterial = () => {
      ElMessage.success('打开资料选择弹窗');
      newResourceMenuVisible.value = false;
    };
    
    const handleUploadMaterial = () => {
      ElMessage.success('打开资料上传弹窗'); 
      newResourceMenuVisible.value = false;
    };

    return {
      currentTab,
      tabs,
      exams,
      filteredExams,
      paginatedExams,
      selectedExams,
      isAnySelected,
      allSelectedOnPage,
      currentPage,
      totalPages,
      changeTab,
      handlePageChange,
      toggleSelection,
      toggleSelectAll,
      batchDeleteExams,
      statusOptions,
      statusConfig,
      toggleNewExamMenu,
      newResourceMenuVisible,
      toggleNewResourceMenu,
      handleSelectMaterial,
      handleUploadMaterial,
    };
  }
};
</script>

<style scoped>
.new-question-menu {
    width: 74px;
    position: absolute;
    margin-top: -15px;
    right: 11.5vw;
    z-index: 10;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.new-question-menu span {
  cursor: pointer;
  padding: 5px 0;
  color: gray;
  transition: color 0.3s;
}

.new-question-menu span:hover {
  color: #244382;
}
/* 样式部分 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-btn {
  background-color: #244382;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-btn:hover {
  background-color: #376edc;
}

/* 禁用按钮样式 */
.pagination-btn:disabled {
  background-color: #b0c4de;
  cursor: not-allowed;
}
</style>

